<script lang="ts" setup>
import { inject, ref } from 'vue';

const props = defineProps<{ modelValue?: any; value?: any }>();
const emits = defineEmits(['update:modelValue', 'change']);
const checked = ref(false);
const checkedValue = inject<any>('checkedValue', null);
const change = inject<any>('change', Function.prototype);

const handleClick = () => {
	checked.value = !checked.value;
	emits('update:modelValue', checked.value);
	emits('change', checked.value);
	// if (checkedValue.value) {
	// 	if (checked.value && props.value) {
	// 		checkedValue.value.add(props.value);
	// 	} else {
	// 		checkedValue.value.delete(props.value);
	// 	}
	// }
	change();
};
</script>

<template>
	<view class="um-checkbox" @tap.stop="handleClick">
		<view class="icon">
			<um-icon name="check" :size="13" color="#5677fc" v-if="checked"></um-icon>
		</view>
		<view class="um-checkbox__body">
			<slot></slot>
		</view>
	</view>
</template>

<style lang="scss" scoped>
.um-checkbox {
	display: flex;
	align-items: center;
	background-color: #fff;

	&__body {
		flex: 1;
	}
}
.icon {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 32rpx;
	height: 32rpx;
	border: 2rpx solid #ccc;
	border-radius: 50%;
	margin-right: 12rpx;
}
</style>
